<template>
	<view class="container">
		<!-- 页面标题 -->
		
		<!-- 日期选择区域 -->
		<view class="date-picker-section">
			<view class="date-input-wrapper">
				<view 
					class="date-input" 
					@click="showCalendar"
				>
					<text class="date-text" :class="{ 'placeholder': !selectedDate }">
						{{ selectedDate || '请选择日期' }}
					</text>
				</view>
				<view class="calendar-icon" @click="showCalendar">
					<view class="calendar-icon-inner">
						<view class="calendar-top"></view>
						<view class="calendar-body">
							<view class="calendar-grid">
								<view class="calendar-dot" v-for="n in 6" :key="n"></view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 时间选择区域 -->
		<view class="time-picker-section">
			<view class="time-input-wrapper">
				<view 
					class="time-input" 
					@click="showTimePicker"
				>
					<text class="time-text" :class="{ 'placeholder': !selectedTime }">
						{{ selectedTime || '请选择时间' }}
					</text>
				</view>
				<view class="time-icon" @click="showTimePicker">
					<view class="clock-icon-inner">
						<view class="clock-face">
							<view class="clock-center"></view>
							<view class="clock-hand hour-hand"></view>
							<view class="clock-hand minute-hand"></view>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 日历组件 -->
		<uni-calendar 
			ref="calendar"
			:insert="false"
			:start-date="minDate"
			:end-date="maxDate"
			@confirm="onCalendarConfirm"
			@close="onCalendarClose"
		></uni-calendar>
		
		<!-- 时间选择弹窗 -->
		<view class="time-picker-modal" v-if="showTimeModal" @click="closeTimeModal">
			<view class="time-picker-content" @click.stop>
				<view class="time-picker-header">
					<text class="time-picker-title">选择时间</text>
					<view class="time-picker-close" @click="closeTimeModal">
						<text class="close-icon">×</text>
					</view>
				</view>
				
				<view class="time-picker-body">
					<view class="time-display">
						<text class="time-display-text">{{ formatTimeDisplay() }}</text>
					</view>
					
					<view class="time-selector">
						<view class="time-column">
							<text class="time-column-title">小时</text>
							<scroll-view class="time-scroll" scroll-y="true" :scroll-top="hourScrollTop">
								<view 
									class="time-item" 
									v-for="hour in 24" 
									:key="hour"
									:class="{ 'active': selectedHour === hour - 1 }"
									@click="selectHour(hour - 1)"
								>
									{{ String(hour - 1).padStart(2, '0') }}
								</view>
							</scroll-view>
						</view>
						
						<view class="time-separator">
							<text class="separator-text">:</text>
						</view>
						
						<view class="time-column">
							<text class="time-column-title">分钟</text>
							<scroll-view class="time-scroll" scroll-y="true" :scroll-top="minuteScrollTop">
								<view 
									class="time-item" 
									v-for="minute in 60" 
									:key="minute"
									:class="{ 'active': selectedMinute === minute - 1 }"
									@click="selectMinute(minute - 1)"
								>
									{{ String(minute - 1).padStart(2, '0') }}
								</view>
							</scroll-view>
						</view>
					</view>
				</view>
				
				<view class="time-picker-footer">
					<view class="time-picker-btn cancel-btn" @click="closeTimeModal">取消</view>
					<view class="time-picker-btn confirm-btn" @click="confirmTimeSelection">确定</view>
				</view>
			</view>
		</view>
		
		<!-- 确定按钮 -->
		<view class="confirm-section">
			<button 
				class="confirm-btn" 
				:class="{ 'disabled': !selectedDate || !selectedTime }"
				@click="confirmDateTime"
			>
				确定
			</button>
		</view>
	</view>
</template>

<script setup>
	import { ref, computed, nextTick } from 'vue'
	
	const selectedDate = ref('')
	const selectedTime = ref('')
	const calendar = ref(null)
	
	// 时间选择相关
	const showTimeModal = ref(false)
	const selectedHour = ref(12)
	const selectedMinute = ref(0)
	const hourScrollTop = ref(0)
	const minuteScrollTop = ref(0)
	
	// 计算最小日期（明天）
	const minDate = computed(() => {
		const today = new Date()
		const tomorrow = new Date(today.getTime() + 24 * 60 * 60 * 1000) // 明天
		const year = tomorrow.getFullYear()
		const month = String(tomorrow.getMonth() + 1).padStart(2, '0')
		const day = String(tomorrow.getDate()).padStart(2, '0')
		return `${year}-${month}-${day}`
	})
	
	// 计算最大日期（一年后）
	const maxDate = computed(() => {
		const today = new Date()
		const nextYear = new Date(today.getFullYear() + 1, today.getMonth(), today.getDate())
		const year = nextYear.getFullYear()
		const month = String(nextYear.getMonth() + 1).padStart(2, '0')
		const day = nextYear.getDate()
		return `${year}-${month}-${day}`
	})
	
	// 显示日历
	const showCalendar = () => {
		if (calendar.value) {
			calendar.value.open()
		}
	}
	
	// 显示时间选择器
	const showTimePicker = () => {
		showTimeModal.value = true
		// 如果有已选择的时间，解析并设置
		if (selectedTime.value) {
			const [hour, minute] = selectedTime.value.split(':').map(Number)
			selectedHour.value = hour
			selectedMinute.value = minute
		}
		// 滚动到当前选中的时间
		nextTick(() => {
			scrollToSelectedTime()
		})
	}
	
	// 关闭时间选择器
	const closeTimeModal = () => {
		showTimeModal.value = false
	}
	
	// 选择小时
	const selectHour = (hour) => {
		selectedHour.value = hour
		scrollToSelectedTime()
	}
	
	// 选择分钟
	const selectMinute = (minute) => {
		selectedMinute.value = minute
		scrollToSelectedTime()
	}
	
	// 滚动到选中的时间
	const scrollToSelectedTime = () => {
		// 计算滚动位置（每个item高度约60rpx）
		const itemHeight = 60
		hourScrollTop.value = selectedHour.value * itemHeight
		minuteScrollTop.value = selectedMinute.value * itemHeight
	}
	
	// 格式化时间显示
	const formatTimeDisplay = () => {
		const hour = String(selectedHour.value).padStart(2, '0')
		const minute = String(selectedMinute.value).padStart(2, '0')
		return `${hour}:${minute}`
	}
	
	// 确认时间选择
	const confirmTimeSelection = () => {
		selectedTime.value = formatTimeDisplay()
		closeTimeModal()
		uni.showToast({
			title: '时间选择成功',
			icon: 'success',
			duration: 1000
		})
	}
	
	// 日历确认选择
	const onCalendarConfirm = (e) => {
		selectedDate.value = e.fulldate
		uni.showToast({
			title: '日期选择成功',
			icon: 'success',
			duration: 1000
		})
	}
	
	// 关闭日历
	const onCalendarClose = () => {
		// 日历关闭时的处理
	}
	
	// 确认日期时间选择
	const confirmDateTime = () => {
		if (!selectedDate.value) {
			uni.showToast({
				title: '你还没有选择通告日期',
				icon: 'none',
				duration: 2000
			})
			return
		}
		
		if (!selectedTime.value) {
			uni.showToast({
				title: '你还没有选择通告时间',
				icon: 'none',
				duration: 2000
			})
			return
		}
		
		// 跳转到商店选择页面，并传递选中的日期和时间
		uni.navigateTo({
			url: `/pages/topic/pub_select_shop?date=${selectedDate.value} ${selectedTime.value}:00`,
			success: () => {
				uni.showToast({
					title: '进入商店选择',
					icon: 'success'
				})
			},
			fail: (err) => {
				console.error('页面跳转失败:', err)
				uni.showToast({
					title: '页面跳转失败',
					icon: 'none'
				})
			}
		})
	}
</script>

<style scoped>
	.container {
		min-height: 100vh;
		background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
		padding: 0 40rpx;
	}
	
	.header {
		padding-top: 100rpx;
		padding-bottom: 80rpx;
		text-align: center;
	}
	
	.title {
		font-size: 48rpx;
		font-weight: 600;
		color: #333;
		letter-spacing: 2rpx;
	}
	
	.date-picker-section {
		padding-top: 160rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100%;
	}
	
	.time-picker-section {
		padding-top: 40rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100%;
	}
	
	.date-input-wrapper,
	.time-input-wrapper {
		display: flex;
		align-items: center;
		background-color: white;
		border: none;
		border-radius: 16rpx;
		overflow: hidden;
		box-shadow: 0 8rpx 32rpx rgba(170, 14, 153, 0.15);
		transition: all 0.3s ease;
		width: 600rpx;
	}
	
	.date-input-wrapper:hover,
	.time-input-wrapper:hover {
		box-shadow: 0 12rpx 48rpx rgba(170, 14, 153, 0.25);
		transform: translateY(-2rpx);
	}
	
	.date-input,
	.time-input {
		flex: 1;
		padding: 32rpx 40rpx;
		text-align: center;
		cursor: pointer;
		transition: background-color 0.2s;
	}
	
	.date-input:hover,
	.time-input:hover {
		background-color: #fafafa;
	}
	
	.date-text,
	.time-text {
		font-size: 32rpx;
		font-weight: 500;
		color: #333;
	}
	
	.date-text.placeholder,
	.time-text.placeholder {
		color: #999;
		font-weight: 400;
	}
	
	.calendar-icon,
	.time-icon {
		padding: 32rpx;
		background: linear-gradient(135deg, #AA0E99 0%, #d946ef 100%);
		cursor: pointer;
		transition: all 0.3s ease;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	.calendar-icon:hover,
	.time-icon:hover {
		background: linear-gradient(135deg, #8B0C7A 0%, #c026d3 100%);
	}
	
	.calendar-icon-inner {
		width: 36rpx;
		height: 36rpx;
		position: relative;
	}
	
	.calendar-top {
		width: 100%;
		height: 8rpx;
		background-color: white;
		border-radius: 4rpx 4rpx 0 0;
		position: relative;
	}
	
	.calendar-top::before,
	.calendar-top::after {
		content: '';
		position: absolute;
		width: 4rpx;
		height: 12rpx;
		background-color: white;
		border-radius: 2rpx;
		top: -6rpx;
	}
	
	.calendar-top::before {
		left: 8rpx;
	}
	
	.calendar-top::after {
		right: 8rpx;
	}
	
	.calendar-body {
		width: 100%;
		height: 28rpx;
		background-color: white;
		border-radius: 0 0 4rpx 4rpx;
		padding: 6rpx;
		box-sizing: border-box;
	}
	
	.calendar-grid {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		grid-template-rows: repeat(2, 1fr);
		gap: 2rpx;
		width: 100%;
		height: 100%;
	}
	
	.calendar-dot {
		background-color: #AA0E99;
		border-radius: 1rpx;
		opacity: 0.6;
	}
	
	/* 时钟图标样式 */
	.clock-icon-inner {
		width: 36rpx;
		height: 36rpx;
		position: relative;
	}
	
	.clock-face {
		width: 100%;
		height: 100%;
		border: 2rpx solid white;
		border-radius: 50%;
		position: relative;
		background-color: transparent;
	}
	
	.clock-center {
		position: absolute;
		top: 50%;
		left: 50%;
		width: 4rpx;
		height: 4rpx;
		background-color: white;
		border-radius: 50%;
		transform: translate(-50%, -50%);
	}
	
	.clock-hand {
		position: absolute;
		background-color: white;
		transform-origin: bottom center;
	}
	
	.hour-hand {
		width: 2rpx;
		height: 12rpx;
		top: 6rpx;
		left: 50%;
		transform: translateX(-50%) rotate(45deg);
	}
	
	.minute-hand {
		width: 1rpx;
		height: 16rpx;
		top: 2rpx;
		left: 50%;
		transform: translateX(-50%) rotate(90deg);
	}
	
	/* 时间选择弹窗样式 */
	.time-picker-modal {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, 0.5);
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 1000;
	}
	
	.time-picker-content {
		background-color: white;
		border-radius: 20rpx;
		width: 600rpx;
		max-height: 80vh;
		overflow: hidden;
		box-shadow: 0 20rpx 60rpx rgba(0, 0, 0, 0.3);
	}
	
	.time-picker-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 40rpx;
		border-bottom: 1rpx solid #eee;
	}
	
	.time-picker-title {
		font-size: 36rpx;
		font-weight: 600;
		color: #333;
	}
	
	.time-picker-close {
		width: 60rpx;
		height: 60rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 50%;
		background-color: #f5f5f5;
		cursor: pointer;
		transition: background-color 0.2s;
	}
	
	.time-picker-close:hover {
		background-color: #e0e0e0;
	}
	
	.close-icon {
		font-size: 40rpx;
		color: #666;
		font-weight: bold;
	}
	
	.time-picker-body {
		padding: 40rpx;
	}
	
	.time-display {
		text-align: center;
		margin-bottom: 40rpx;
		padding: 20rpx;
		background-color: #f8f9fa;
		border-radius: 12rpx;
	}
	
	.time-display-text {
		font-size: 48rpx;
		font-weight: 600;
		color: #333;
		font-family: 'Courier New', monospace;
	}
	
	.time-selector {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 20rpx;
	}
	
	.time-column {
		flex: 1;
		text-align: center;
	}
	
	.time-column-title {
		font-size: 28rpx;
		color: #666;
		margin-bottom: 20rpx;
		display: block;
	}
	
	.time-scroll {
		height: 300rpx;
		border: 1rpx solid #e0e0e0;
		border-radius: 12rpx;
		background-color: #fafafa;
	}
	
	.time-item {
		height: 60rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 32rpx;
		color: #333;
		cursor: pointer;
		transition: all 0.2s;
		border-bottom: 1rpx solid #f0f0f0;
	}
	
	.time-item:hover {
		background-color: #f0f0f0;
	}
	
	.time-item.active {
		background: linear-gradient(135deg, #AA0E99 0%, #d946ef 100%);
		color: white;
		font-weight: 600;
	}
	
	.time-separator {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 60rpx;
		height: 300rpx;
	}
	
	.separator-text {
		font-size: 48rpx;
		font-weight: 600;
		color: #333;
	}
	
	.time-picker-footer {
		display: flex;
		gap: 20rpx;
		padding: 40rpx;
		border-top: 1rpx solid #eee;
	}
	
	.time-picker-btn {
		flex: 1;
		padding: 10rpx 20rpx;
		border-radius: 12rpx;
		font-size: 32rpx;
		font-weight: 600;
		border: none;
		cursor: pointer;
		transition: all 0.3s ease;
		text-align: center;
		line-height: 60rpx;
	}
	
	.cancel-btn {
		background-color: #f5f5f5;
		color: #666;
	}
	
	.cancel-btn:hover {
		background-color: #e0e0e0;
	}
	
	.confirm-btn {
		background: linear-gradient(135deg, #AA0E99 0%, #d946ef 100%);
		color: white;
	}
	
	.confirm-btn:hover {
		background: linear-gradient(135deg, #8B0C7A 0%, #c026d3 100%);
		transform: translateY(-2rpx);
	}
	
	.confirm-section {
		position: fixed;
		bottom: 120rpx;
		left: 40rpx;
		right: 40rpx;
	}
	
	.confirm-btn {
		width: 100%;
		background: linear-gradient(135deg, #AA0E99 0%, #d946ef 100%);
		color: white;
		border: none;
		border-radius: 16rpx;
		padding: 20rpx;
		font-size: 32rpx;
		font-weight: 600;
		transition: all 0.3s ease;
		box-shadow: 0 8rpx 32rpx rgba(170, 14, 153, 0.3);
		letter-spacing: 2rpx;
	}
	
	.confirm-btn.disabled {
		background: #ccc;
		cursor: not-allowed;
		box-shadow: none;
	}
	
	.confirm-btn:not(.disabled):hover {
		background: linear-gradient(135deg, #8B0C7A 0%, #c026d3 100%);
		transform: translateY(-2rpx);
		box-shadow: 0 12rpx 48rpx rgba(170, 14, 153, 0.4);
	}
</style>
